<template>
  <view class="segment">
    <view class="header">
      <view class="left">
        <view class="title" :style="titleBold ? 'font-weight: bold;' : ''">
          {{ title }}
          <slot name="title" />
        </view>
      </view>
      <view class="right">
        <slot name="right" />
      </view>
    </view>
    <slot />
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
    titleBold: {
      type: [Boolean, String, Number],
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    }
  }
}
</script>

<style lang="less" scoped>
  .segment {
    .header {
      margin-bottom: 40rpx;
      display: flex;
      justify-content: space-between;

      .title {
        line-height: 50rpx;
        font-family: PingFangSC-Regular;
        font-size: 36rpx;
        color: #1A1A1A;
        letter-spacing: 0;
        text-align: justify;
        font-weight: 400;
      }
    }
  }
</style>